<div id="register" class="animate form login_form">
    <section class="login_content">
        <form action="javascript:void(0);">
            <h1>Create Account</h1>
            <div>
                <input type="text" v-model="user.userName" class="form-control" placeholder="Username" required="" />
            </div>
            <div>
                <input type="password" v-model="user.password" class="form-control" placeholder="Password"
                    required="" />
            </div>
            <div>
                <a @click="register()" class="btn btn-default submit" href="javascript:void(0);">Submit</a>
            </div>

            <div class="clearfix"></div>

            <div class="separator">
                <p class="change_link">
                    Already a member ?
                    <a href="/login" class="to_register"> Log in </a>
                </p>

                <div class="clearfix"></div>
                <br />

                <div>
                    <h1><i class="fa fa-paw"></i>SFAC</h1>
                    <p>Copyright © 2022 JiangHu. All rights reserved. 蜀ICP备 2021031966号-1</p>
                </div>
            </div>
        </form>
    </section>
</div>

<script>
    var registerVue = new Vue({
        el: "#register",
        data: {
            user: {
                userName: "",
                password: "",
            },
        },
        methods: {
            register: function () {
                if (this.user.userName == "" || this.user.password == "") {
                    layer.msg("请输入用户名和密码", { icon: 0 });
                    return;
                }
                var self = this;
                $.ajax({
                    url: "/api/user",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.user),
                    success: function (result) {
                        if (result.status == 500) {
                            layer.msg(result.message, { icon: 0});
                        } else {
                            layer.msg("注册成功",{icon:6},function () {
                                window.location.href = "/login";
                            })
                        }
                    },
                    error: function (errorMsg, result) {
                        layer.msg(result, { icon: 0 });
                    }
                });
            },
        }
    });
</script>